<script setup>
import { ref, onMounted } from 'vue';
import chartApi from "@/api/chart.js";
import {useTokenStore} from '@/store/token.js'

const tokenStore = useTokenStore()

const coachCourseCount = ref(0);
const coachReserveCount = ref(0);
const coachActiveDays = ref(0);

onMounted(() => {
    const coachId = tokenStore.coachId;
    if (!coachId) {
        console.error('CoachPersonalStats - 无法获取当前教练ID');
        return;
    }
    console.log('CoachPersonalStats - 当前教练ID:', coachId);
    
    // 获取教练课程总数
    chartApi.selectCoachCourseTotal(coachId).then(result => {
        console.log('教练课程总数结果:', result);
        coachCourseCount.value = result.data || 0;
    }).catch(error => {
        console.error('获取教练课程总数失败:', error);
    });

    // 获取教练预约总数
    chartApi.selectCoachReserveTotal(coachId).then(result => {
        console.log('教练预约总数结果:', result);
        coachReserveCount.value = result.data || 0;
    }).catch(error => {
        console.error('获取教练预约总数失败:', error);
    });

    // 获取教练活跃天数
    chartApi.selectCoachActiveDays(coachId).then(result => {
        console.log('教练活跃天数结果:', result);
        coachActiveDays.value = result.data || 0;
    }).catch(error => {
        console.error('获取教练活跃天数失败:', error);
    });

});

</script>

<template>
    <div class="stats-container">
        <div class="stat-item">
            <div class="title">我的课程</div>
            <div class="count course">{{ coachCourseCount }}</div>
        </div>
        <div class="stat-item">
            <div class="title">预约数量</div>
            <div class="count reserve">{{ coachReserveCount }}</div>
        </div>
        <div class="stat-item">
            <div class="title">活跃天数</div>
            <div class="count active">{{ coachActiveDays }}</div>
        </div>
    </div>
</template>

<style scoped>
.stats-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100%;
    padding: 20px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
}

.title {
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.count{
    width: 75px;
    height: 75px;
    border: 15px solid #49BCF7;
    border-radius: 50px;
    text-align: center;
    line-height: 70px;
    font-size: 30px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.course{
    border-color: #91CC75;
    color: #91CC75;
}
.reserve{
    border-color: #5470C6;
    color: #5470C6;
}
.active{
    border-color: #FAC858;
    color: #FAC858;
}
</style>
